<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:03:19
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='foodManage'>
    <!-- 头部 -->
    <div class="header">
      <el-button type="primary" @click="addProduct">新增</el-button>
      <el-select v-model="selectValue" clearable placeholder="请选择">
        <el-option v-for="item in productCategorys.list" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" @click="searchByproductCategoryID">搜索</el-button>
    </div>
    <!-- 表格数据 -->
    <div class="tableContent">
      <el-table :data="products.list" style="width: 100%" v-loading="loading">

        <!-- 菜品图 -->
        <el-table-column label="菜品图" width="180" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.photo" @load="imgFinish"
              :preview-src-list="[scope.row.photo]">
              <!-- 图片未加载时的占位图 -->
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>

        <!-- 名称 -->
        <el-table-column prop="name" label="名称" width="180" align="center">
          <template slot-scope="scope">
            <!-- 名称 -->
            <div>{{scope.row.name}}</div>
            <!-- 价格/杯 -->
            <div>
              <span style="color:red;font-size:18px"> {{scope.row.price}}元</span>
              /{{scope.row.unit}}
            </div>
          </template>
        </el-table-column>

        <!-- 销量 -->
        <el-table-column prop="description" label="销量" width="100" align="center">
          <template slot-scope="scope">

            <div v-if="scope.row.sales === null">暂无</div>
            <div v-else>{{scope.row.sales}}</div>

          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == '正常'">上架商品</el-tag>
            <el-tag type="danger" v-else>下架商品</el-tag>
          </template>
        </el-table-column>

        <!--  介绍 -->
        <el-table-column prop="description" label="介绍" align="center">

        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button v-if="scope.row.status == '下架'" type="text" size="small" @click="onLineClick(scope.row.id)">
              上架
            </el-button>
            <el-button v-else type="text" size="small" @click="offLineClick(scope.row.id)">
              下架
            </el-button>

            <el-button type="text" size="small" @click=" delProduct(scope.row.id)">删除</el-button>
            <el-button type="text" size="small" @click="editProduct(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="curPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="products.total">
        </el-pagination>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="dialogTitile" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="productForm" :rules="rules" ref="productFormRef" label-width="100px" class="demo-ruleForm">
        <!-- 表单项 -->
        <!-- 名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="productForm.name"></el-input>
        </el-form-item>
        <!-- 单价 -->
        <el-form-item label="单价" prop="price">
          <el-input v-model="productForm.price"></el-input>
        </el-form-item>
        <!-- 规格参数 -->
        <el-form-item label="规格参数" prop="unit">
          <el-input v-model="productForm.unit"></el-input>
        </el-form-item>
        <!-- 所属菜单 -->
        <el-form-item label="所示菜单" prop="productCategoryId">
          <el-select v-model="productForm.productCategoryId" clearable placeholder="请选择">
            <el-option v-for="item in productCategorys.list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 介绍 -->
        <el-form-item label="介绍" prop="description">
          <el-input type="textarea" v-model="productForm.description"></el-input>
        </el-form-item>
        <el-form-item label="菜品图">
          <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:300px;heigth:200px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  import {
    get,
    post
  } from '@/utils/request'
  export default {
    // 组件名称
    name: 'demo',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {

        // 文件预览的路径     文件预览路径+文件id
        showFileURL: 'http://121.199.29.84:8888/group1/',
        // 项目基础路径和文件上传路径
        uploadFileURL: 'http://121.199.29.84:8001/file/upload',
        productForm: {},
        imageUrl: '',
        rules: {
          name: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }, ],
          price: [{
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }, ],
          unit: [{
              required: true,
              message: '请输入规格参数',
              trigger: 'blur'
            },

          ],
          description: [{
            required: true,
            message: '请输入菜品介绍',
            trigger: 'change'
          }],
          productCategoryId: [{
            required: true,
            message: '请选择活动区域',
            trigger: 'change'
          }],
        },
        curPage: 1,
        pageSize: 5,
        loading: false,
        selectValue: '',
        dialogTitile: '',
        dialogVisible: false,
      }
    },
    // 计算属性
    computed: {
      ...mapState('product', ['products', 'productCategorys'])

    },
    // 侦听器
    watch: {},
    // 组件方法
    methods: {

      ...mapActions('product', ['getProductVuex', 'getProductCategoryVuex']),

      //查询所有产品信息
      getProductData() {
        this.loading = true
        let params = {
          page: this.curPage,
          pageSize: this.pageSize,
          productCategoryId: this.selectValue

        }
        this.getProductVuex(params)
      },

      // 查询所有产品分类
      getProductCategoryData() {
        let params = {
          page: 1,
          pageSize: 20
        }
        this.getProductCategoryVuex(params)
      },

      //按分类查询所有产品
      searchByproductCategoryID() {
        // console.log(this.selectValue)
        this.curPage = 1;
        this.getProductData()
      },


      // 保存或更新产品信息
      submitForm() {
        this.$refs['productFormRef'].validate((valid) => {
          if (valid) {
          //  console.log(this.productForm)
            this.dialogVisible = false;
            post("/product/saveOrUpdate", this.productForm).then(res => {
              if (res.status == 200) {
                this.$message({
                  title: '成功',
                  message: res.message,
                  type: 'success'
                });
                this.getProductData()
                this.loading = false
                this.dialogVisible = false
              } else {
                this.$message({
                  title: '失败',
                  message: res.message,
                  type: 'danger'
                });
              }

            })

          } else {
            //  console.log('error submit!!');
            return false;
          }
        });
      },

      //删除产品
      delProduct(id) {
        console.log(id)
        this.$confirm('确认删除？')
          //确认按钮事件
          .then(_ => {
            get('/product/deleteById', {
              id: id
            }).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getProductData()
            })
          })
          // 取消按钮事件
          .catch(_ => {});

      },

      handleClose() {
        // 清空表单的数据 和 验证信息
        this.$confirm('确认关闭？')
          //确认按钮事件
          .then(_ => {
            this.dialogVisible = false
            done();
          })
          // 取消按钮事件
          .catch(_ => {});
      },

      // 图片加载完
      imgFinish() {
        this.loading = false;
      },

      // 图片上传之前做的处理
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.productForm.photo = this.showFileURL + res.data.id;
      },
      // 图片上传之前做的处理
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt3M = file.size / 1024 / 1024 < 3;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt3M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt3M;
      },

      //新增数据对话框
      addProduct() {
        this.productForm = {}
        this.dialogTitile = '新增产品信息'
        this.imageUrl = '';
        this.dialogVisible = true

      },

      //修改数据对话框
      editProduct(proObj) {
        this.productForm = {
          ...proObj
        };
        this.imageUrl = this.productForm.photo;
        this.dialogTitile = '修改产品信息'
        this.dialogVisible = true
      },


      //上架
      onLineClick(productId) {
        get('/product/online', {
          id: productId
        }).then(res => {
          // console.log(res);
          if (res.message == '上架成功') {
            this.$message({
              message: res.message,
              type: 'success'
            })
            //下架成功后 刷新页面的数据
            this.getProductData()
            this.loading = false

          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            })
          }
        })
      },
      //下架
      offLineClick(productId) {
        get('/product/offline', {
          id: productId
        }).then(res => {
          // console.log(res);
          if (res.message == '下架成功') {
            this.$message({
              message: res.message,
              type: 'success'
            })
            //下架成功后 刷新页面的数据
            this.getProductData()
            this.loading = false

          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            })
          }
        })
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.getProductData();
      },
      handleCurrentChange(curPage) {
        this.curPage = curPage;
        this.getProductData();
      },




    },
    // 以下是生命周期钩子
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {
      this.getProductData();
      this.getProductCategoryData();
    },
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() {

    },
    /**
     * 实例销毁之前调用。在这一步，实例仍然完全可用。
     */
    beforeDestroy() {},
    /**
     * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
     * 所有的事件监听器会被移除，所有的子实例也会被销毁。
     */
    destroyed() {}
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
  .foodManage {
    min-height: calc(100vh - 100px);

  }

  .tableContent {
    margin-top: 10px;
    max-height: 550px;
    overflow: auto;
  }

  .pagination {
    position: fixed;
    right: 10px;
    bottom: 30px;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

</style>
